<template>
  <div class="gridlist-demo-container">
    <div class="flexbox-tiem-box" v-for="tile, index in list">
      <mu-grid-list>
        <mu-grid-tile  :cols="2" class="grid-tile">
          <img :src="pictureUrl+tile.picture_thumbnail" @click="open(index)"/>
          <mu-dialog :open="dialogs[index]" :title="tile.author" @close="close">
            <div class="dialog-img">
              <img :src="bigPictureUrl+tile.picture_thumbnail"/>
            </div>
            <mu-flat-button slot="actions" @click="close(index)" primary label="取消"/>
            <mu-flat-button slot="actions" primary @click="close(index)" label="确定"/>
          </mu-dialog>
        </mu-grid-tile>
      </mu-grid-list>

      <div>
        <button-group :data.sync="tile.picture_check" :id="tile.picture_id" :chooseStatus="group_check[index]"></button-group>
        <div class="author-box">
          <span class="author-h">上传人:</span>&nbsp;
          <span class="author-h">
            <mu-chip class="demo-chip" disabled backgroundColor="#F0F0F0">
              <mu-avatar v-if="tile.pictures" :size="32" :src="tile.pictures.user_thumbnail"/>
              <span v-if="tile.pictures">
                {{tile.pictures.user_name}}|
                {{tile.picture_id}}|
                {{tile.picture_check}}
              </span>
              
            </mu-chip>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import buttonGroup from './button-group.vue'
export default {
  props:['list','chooseStatus'],
    components:{
      buttonGroup
    },
  data () {
    return {
      pictureUrl:this.config.pictureUrl,
      bigPictureUrl:this.config.pictureUrl,
      dialogs:[],
      dialogIndex:0,
      group_check:[],//button-goup里复选框的状态
      // list: [
      //   {
      //     image: '/static/images/4833.jpg',
      //     thumbnail: '/static/images/4833.jpg',
      //     author: 'Myron',
      //     featured: false,
      //     status:0   //0没有被审核，1选中，2屏蔽
      //   }
      // ]
    }
  },
  methods:{
    open (i) {
      this.dialogs[i] = true
      this.dialogs = this.dialogs.concat();
      this.dialogIndex = i
    },
    close () {
      this.dialogs[this.dialogIndex] = false
      this.dialogs = this.dialogs.concat();
    },
    refreshDialogs:function(){
    var length = this.list.length;
    this.group_check = Array(length).fill(false);
    console.log(this.group_check)
    this.dialogs = Array(length).fill(false);
    }
  },
  beforeMount() {
    this.refreshDialogs()
  },
  watch:{
    listWatch(val,oldVal){
        // this.refreshDialogs()
    },
    chooseStatus(val,oldVal){
      var length = this.list.length;
      this.group_check = Array(length).fill(false);
      if(val){ //选中时获取所有未被屏蔽的图片时选中对应的复选框
        for(var i in this.list){
          if(this.list[i].picture_check != 2){
            this.group_check[i] = true
          }
        }
      }else{
        for(var i in this.list){
          if(this.list[i].picture_check != 2){
            this.group_check[i] = false
          }
        }
      }
    },
  },
  computed:{
    listWatch:function(){
        return this.list.concat();
    }
  }
}
</script>

<style>
.flexbox-tiem-box{
  display: inline-block;
  float: left;
  margin: 8px;
  width: 250px;
  height:260px;
  background-color: #F0F0F0;
  text-align: center;
  line-height: 22px;
}
.grid-tile img{
  width: 100%;
  height:100%;
}
.mu-grid-tile-titlebar{
  display: none;
}
.author-box{
  text-align: left;
  padding: 0 5px;
}
.author-h{
  display: inline-block;
  vertical-align: middle;
  font-size:16px;

}
.dialog-img img{
  width:100%;
  height:100%;
}
</style>